<template>
  <view class="movie-detail-page">
    <!-- Header Bar -->
    <view class="header-bar">
      <view class="back-icon" @tap="goBack">
        <image src="/static/images/back-arrow-white.png" mode="aspectFit" />
      </view>
      <text class="title">电影</text>
    </view>

    <scroll-view scroll-y class="scroll-container">
      <!-- Top Section with Gradient -->
      <view class="top-gradient-section">
        <!-- Movie Info -->
        <view class="movie-info-container">
          <image :src="getPoster(movieInfo.poster)" class="poster-image" mode="aspectFill" />
          <view class="details">
            <text class="movie-name">{{ movieInfo.name }}</text>
            <text class="detail-text">类型：{{ movieInfo.type }}</text>
            <text class="detail-text actors">主演：{{ movieInfo.actor }}</text>
            <text class="detail-text">片长：{{ movieInfo.movieLong }}分钟</text>
            <text class="detail-text">上映：{{ movieInfo.publicDate }}</text>
          </view>
        </view>

        <!-- Action Buttons -->
        <view class="action-buttons">
          <view class="action-btn" @tap="wishBtnHandle">
            <image src="/static/images/heart.png" mode="aspectFit" class="btn-icon" />
            <text>想看</text>
          </view>
          <view class="action-btn" @tap="watchedBtnHandle">
            <image src="/static/images/star.png" mode="aspectFit" class="btn-icon" />
            <text>看过</text>
          </view>
        </view>

        <!-- Rating Section -->
        <view class="rating-section card">
          <view class="card-header">
            <text class="card-title">口碑</text>
          </view>
          <view class="rating-content">
            <view class="score-left">
              <text class="score-value">{{ averageScore.toFixed(1) }}</text>
              <text class="score-text">分</text>
            </view>
            <view class="stars-right">
              <!-- Simple star rating display -->
              <view class="stars">
                <image v-for="n in 5" :key="n" :src="n <= (averageScore/2) ? '/static/images/star-full.png' : '/static/images/star-empty.png'" class="star-icon" />
              </view>
              <text class="rating-count">{{ commentNum }}人评价</text>
            </view>
          </view>
        </view>

        <!-- Introduction Section -->
        <view class="intro-section card">
          <view class="card-header">
            <text class="card-title">简介</text>
          </view>
          <text class="intro-content">{{ movieInfo.intro }}</text>
        </view>
      </view>

      <!-- Comment Section -->
      <view class="comment-section">
        <view class="card-header">
          <text class="card-title-black">评论</text>
          <view class="participate-btn" @tap="watchedBtnHandle">参与评论</view>
        </view>
        <view v-if="userCommentDate.length > 0" class="comment-list">
          <view v-for="(item, index) in userCommentDate" :key="index" class="comment-item">
            <image :src="getPoster(item.avatar)" class="comment-avatar" mode="aspectFill" />
            <view class="comment-details">
              <text class="comment-user">{{ item.name }}</text>
              <text class="comment-score">给这部作品打了{{ item.userScore }}分</text>
              <text class="comment-text">{{ item.content }}</text>
              <view class="comment-footer">
                <text class="comment-date">{{ formatCommentDate(item.commentDate) }}</text>
                <!-- Support button can be added here -->
              </view>
            </view>
          </view>
        </view>
        <view v-else class="no-comments">
          <text>暂无评论！</text>
        </view>
      </view>
    </scroll-view>

    <!-- Fixed Bottom Button -->
    <view class="bottom-bar">
      <button class="buy-ticket-btn" @tap="buyTicket">特惠购票</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      movieInfo: {
        // Default structure
        name: '加载中...',
        poster: '',
        type: '...',
        actor: '...',
        movieLong: '...',
        publicDate: '...',
        intro: '...'
      },
      userCommentDate: [],
      averageScore: 0,
      commentNum: 0,
      movieId: null
    };
  },
  onLoad(options) {
    if (options.movie_id) {
      this.movieId = options.movie_id;
      this.loadMovieDetail();
      this.loadComments();
    }
  },
  methods: {
    // Navigate back
    goBack() {
      uni.navigateBack();
    },
    // Construct full image path
    getPoster(path) {
      if (!path) return '/static/images/placeholder.png'; // A default placeholder
      if (path.startsWith('http')) {
        return path;
      }
      return 'http://localhost:9090' + path;
    },
    // Load movie details from backend
    loadMovieDetail() {
      uni.request({
        url: `http://localhost:9090/findOneMovie?id=${this.movieId}`,
        method: 'GET',
        success: (res) => {
          if (res.data.code === 1) {
            this.movieInfo = res.data.movie;
          } else {
            uni.showToast({ title: '加载电影信息失败', icon: 'none' });
          }
        },
        fail: () => {
          uni.showToast({ title: '网络错误', icon: 'none' });
        }
      });
    },
    // Load comments from backend
    loadComments() {
        uni.request({
            url: `http://localhost:9090/getCommentInfo?movie_id=${this.movieId}`,
            method: 'GET',
            success: (res) => {
                // 后端返回的数据在 res.data.commentInfo 中
                if(res.data.code === 1 && res.data.commentInfo.length > 0) {
                    this.userCommentDate = res.data.commentInfo;
                    this.commentNum = this.userCommentDate.length;
                    
                    let totalScore = this.userCommentDate.reduce((sum, item) => sum + item.userScore, 0);
                    this.averageScore = this.commentNum > 0 ? totalScore / this.commentNum : 0;
                }
            }
        })
    },
    // Placeholder for "Wish" button
    wishBtnHandle() {
      uni.showToast({ title: '想看功能开发中...', icon: 'none' });
      // Here you would check login status and call API
    },
    // Placeholder for "Watched" button (goes to comment)
    watchedBtnHandle() {
       uni.showToast({ title: '评论功能开发中...', icon: 'none' });
      // Here you would check login status and navigate to a comment page
      // uni.navigateTo({ url: `/pages/comment/comment?movie_id=${this.movieId}` });
    },
    // Navigate to cinema selection
    buyTicket() {
      uni.navigateTo({
        url: `/pages/select-cinema/select-cinema?movie_id=${this.movieId}`
      });
    },
    // Format date for display
    formatCommentDate(dateStr) {
      if (!dateStr) return '';
      const date = new Date(dateStr);
      return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
    }
  }
};
</script>

<style>
.movie-detail-page {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f4f4f4;
}

.header-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 88rpx;
  background-color: rgba(3, 3, 3, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  z-index: 999;
}

.back-icon {
  position: absolute;
  left: 20rpx;
  width: 40rpx;
  height: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
.back-icon image {
  width: 100%;
  height: 100%;
}

.header-bar .title {
  font-size: 32rpx;
  font-weight: bold;
}

.scroll-container {
  flex: 1;
  margin-top: 88rpx; /* Height of header */
  margin-bottom: 120rpx; /* Height of bottom bar */
}

.top-gradient-section {
  background: linear-gradient(to bottom, #dd2727, #a52a2a);
  padding: 30rpx;
  color: #fff;
}

.movie-info-container {
  display: flex;
  align-items: flex-start;
}

.poster-image {
  width: 200rpx;
  height: 280rpx;
  border-radius: 8rpx;
  flex-shrink: 0;
}

.details {
  display: flex;
  flex-direction: column;
  margin-left: 30rpx;
}

.movie-name {
  font-size: 40rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
}

.detail-text {
  font-size: 26rpx;
  line-height: 1.6;
  opacity: 0.9;
}

.actors {
    white-space: normal;
    word-break: break-all;
}

.action-buttons {
  display: flex;
  justify-content: space-around;
  margin: 40rpx 0;
}

.action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 45%;
  height: 80rpx;
  background-color: #ffb400;
  border-radius: 40rpx;
  font-size: 30rpx;
}
.btn-icon {
    width: 36rpx;
    height: 36rpx;
    margin-right: 10rpx;
}


.card {
  margin-bottom: 20rpx;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
  padding: 0 10rpx;
}

.card-title {
  font-size: 32rpx;
  font-weight: bold;
}
.card-title-black {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
}

.rating-content {
  display: flex;
  align-items: center;
  padding: 20rpx;
}

.score-left {
  display: flex;
  align-items: baseline;
  color: #ffb400;
}

.score-value {
  font-size: 56rpx;
  font-weight: bold;
}

.score-text {
  font-size: 28rpx;
  margin-left: 5rpx;
}

.stars-right {
  margin-left: 40rpx;
  display: flex;
  flex-direction: column;
}
.stars {
    display: flex;
    margin-bottom: 10rpx;
}
.star-icon {
    width: 40rpx;
    height: 40rpx;
    margin-right: 5rpx;
}

.rating-count {
  font-size: 24rpx;
  opacity: 0.8;
}

.intro-content {
  font-size: 28rpx;
  line-height: 1.8;
  text-align: justify;
  padding: 0 10rpx;
  opacity: 0.9;
}

.comment-section {
  background-color: #fff;
  padding: 30rpx;
  border-top-left-radius: 20rpx;
  border-top-right-radius: 20rpx;
  min-height: 300rpx;
}

.participate-btn {
    font-size: 24rpx;
    color: #fff;
    background-color: #dd2727;
    padding: 10rpx 20rpx;
    border-radius: 30rpx;
}

.no-comments {
    text-align: center;
    color: #999;
    padding-top: 50rpx;
}

.comment-list {
    margin-top: 20rpx;
}

.comment-item {
    display: flex;
    margin-bottom: 40rpx;
}

.comment-avatar {
    width: 64rpx;
    height: 64rpx;
    border-radius: 50%;
    flex-shrink: 0;
}

.comment-details {
    margin-left: 20rpx;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.comment-user {
    font-size: 28rpx;
    font-weight: bold;
    color: #333;
}
.comment-score {
    font-size: 22rpx;
    color: #999;
    margin: 8rpx 0;
}
.comment-text {
    font-size: 28rpx;
    color: #333;
    line-height: 1.6;
}
.comment-footer {
    margin-top: 15rpx;
    font-size: 22rpx;
    color: #999;
}

.bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 120rpx;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 1rpx solid #eee;
  padding: 0 30rpx;
  box-sizing: border-box;
}

.buy-ticket-btn {
  width: 100%;
  height: 88rpx;
  line-height: 88rpx;
  background-color: #dd2727;
  color: #fff;
  font-size: 32rpx;
  border-radius: 44rpx;
}
</style>